<template>
	<view class="func-tab-bar">
		<uni-segmented-control class="tab-bar" :current="current" :values="barList" @clickItem="onClickItem" styleType="button" activeColor="#00ccc6"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<MusicPanel></MusicPanel>
			</view>
			<view v-show="current === 1">
				<VoicePanel></VoicePanel>
			</view>
<!-- 			<view v-show="current === 2">
				<VideoPanel></VideoPanel>
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
import VoicePanel from "@/components/VoicePanel/VoicePanel.vue";
import MusicPanel from "@/components/MusicPanel/MusicPanel.vue";
// import VideoPanel from "@/components/VideoPanel/VideoPanel.vue";
	
import { ref } from 'vue';

const current = ref(0);
const barList = ["音乐", "语音"];

function onClickItem(e: { currentIndex: number; }) {
	const idx = e.currentIndex
	if (current.value !== idx) {
		current.value = idx;
	}
}
</script>

<style lang="scss">

.func-tab-bar {
	display: flex;
	flex-direction: column;
	height: 100%;
}

</style>